import { getPrevPage } from '../../utils/utils'
import { getGoodsListAPI } from '../apis/goods'

// pages_goods/list/list.js
Page({
  data: {
    scrollTop: 0,
    offsetTop: 0,
    isGrid: false, // 列表排版方式
    isFirstLoad: true, // 是否首次加载
    list: [], // 商品列表
    sortType: 'all', // 排序方式
    sortPrice: 0, // 价格排序方式
    categoryId: 0, // 分类id
    goodsName: '', // 搜索关键字
    page: 1, // 当前页码
  },
  // 跳转搜索页
  goToSearch() {
    // 🚨注意：微信小程序的页面栈最多存放 10 个页面，到达 10 个页面无法打开新页面
    // 获取上一页的页面实例
    const prevPage = getPrevPage()
    // 判断上一页是否为搜索页
    if (prevPage.route.includes('/search')) {
      // 如果上一页是搜索页，直接返回上一页(减少不必要的历史记录)
      wx.navigateBack()
    } else {
      // 如果上一页不是搜索页，就跳转搜索
      wx.navigateTo({ url: '/pages/search/search' })
    }
  },
  // 切换列表排版方式
  changeShowsGrid() {
    this.setData({
      isGrid: !this.data.isGrid,
    })
  },
  // Sticky 粘性布局 - 嵌套在 scroll-view 内使用
  // 参考代码：https://vant-contrib.gitee.io/vant-weapp/#/sticky#qian-tao-zai-scroll-view-nei-shi-yong
  onScroll(event) {
    wx.createSelectorQuery()
      .select('#scroller')
      .boundingClientRect((res) => {
        this.setData({
          scrollTop: event.detail.scrollTop,
          offsetTop: res.top,
        })
      })
      .exec()
  },
  // 页面加载，获取页面参数
  onLoad({ categoryId = 0, goodsName = '' }) {
    // 更新页面参数
    this.setData({
      categoryId,
      goodsName,
    })
    // 获取商品列表
    this.getList()
  },
  // 获取商品列表
  async getList() {
    // 获取接口所需参数
    const { sortType, sortPrice, categoryId, goodsName, page } = this.data
    // 请求参数
    const queryParams = {
      sortType,
      sortPrice,
      categoryId,
      goodsName,
      page,
    }
    // 遍历对象的属性，过滤掉空参数
    for (let key in queryParams) {
      // 检查属性值是否为 undefined
      if (queryParams[key] === undefined) {
        // 使用 delete 删除属性
        delete queryParams[key]
      }
    }
    // 根据参数获取商品列表
    const res = await getGoodsListAPI(queryParams)
    console.log('🟢 res', res)
    // 更新界面
    this.setData({
      list: res.data.list.data,
      isFirstLoad: false,
    })
  },
  // 点击 tab 排序
  changeSort(ev) {
    // 获取排序参数
    const { sortType } = ev.mark
    // 判断是否为价格排序
    if (sortType === 'price') {
      // 更新价格排序方式
      this.setData({
        sortPrice: this.data.sortPrice === 0 ? 1 : 0,
      })
    }
    // 更新界面
    this.setData({
      sortType,
    })
    // 获取商品列表
    this.getList()
  },
})
